<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仓禾点菜App原型聚合页</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body { background: #121212; margin: 0; }
      .iframe-wrap {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        height: calc(100vh - 62px);
        border: none;
        background: #121212;
        display: block;
        transition: height 0.2s;
      }
      @media (max-width: 520px) { .iframe-wrap { height: calc(100vh - 62px); } }
      .bottom-bar {
        max-width: 480px;
        margin: 0 auto;
        background: #181A20;
        box-shadow: 0 -2px 16px #000A, 0 -1px 0 #232323;
        border-radius: 18px 18px 0 0;
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 20;
        padding: 0 6px;
        height: 62px;
      }
      .bottom-bar button {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #E6E6E6;
        font-size: 13px;
        font-weight: 500;
        padding: 0;
        margin: 0 2px;
        border-radius: 14px;
        transition: color 0.2s, transform 0.12s;
      }
      .bottom-bar button:active {
        background: none;
        transform: scale(0.93);
        color: #FE2C55;
      }
      .bottom-bar button:active .fa {
        color: #FE2C55;
      }
      .bottom-bar button.active {
        color: #FE2C55;
        background: #232323;
        font-weight: 700;
      }
      .bottom-bar button .fa {
        font-size: 20px;
        margin-bottom: 2px;
        transition: color 0.2s;
      }
      .bottom-bar button.active .fa {
        color: #00F2EA;
      }
      .bottom-bar button:not(.active) .fa {
        color: #E6E6E6;
      }
      .bottom-bar button.active::after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        bottom: 6px;
        transform: translateX(-50%);
        width: 8px;
        height: 8px;
        background: #00F2EA;
        border-radius: 50%;
        opacity: 0.7;
      }
      .bottom-bar button:focus {
        outline: none;
      }
    </style>
  </head>
  <body>
    <iframe id="protoFrame" class="iframe-wrap" src="home.html"></iframe>
    <div class="fixed bottom-0 left-0 right-0 flex z-20 bottom-bar">
      <button
        class="flex-1 py-2 flex flex-col items-center"
        onclick="switchPage(0)"
        id="tab0"
      >
        <i class="fa fa-home text-lg"></i>
        <span class="text-xs">首页</span>
      </button>
      <button
        class="flex-1 py-2 flex flex-col items-center"
        onclick="switchPage(1)"
        id="tab1"
      >
        <i class="fa fa-utensils text-lg"></i>
        <span class="text-xs">点菜</span>
      </button>
      <button
        class="flex-1 py-2 flex flex-col items-center"
        onclick="switchPage(3)"
        id="tab3"
      >
        <i class="fa fa-plus text-lg"></i>
        <span class="text-xs">新增菜单</span>
      </button>
      <button
        class="flex-1 py-2 flex flex-col items-center"
        onclick="switchPage(4)"
        id="tab4"
      >
        <i class="fa fa-chart-bar text-lg"></i>
        <span class="text-xs">统计</span>
      </button>
      <button
        class="flex-1 py-2 flex flex-col items-center"
        onclick="switchPage(5)"
        id="tab5"
      >
        <i class="fa fa-user text-lg"></i>
        <span class="text-xs">我的</span>
      </button>
    </div>
    <script>
      const pages = [
        'home.html',
        'order.html',
        'menu.html',
        'add_menu.html',
        'statistics.html',
        'mine.html'
      ];
      function switchPage(idx) {
        document.getElementById('protoFrame').src = pages[idx];
        for(let i=0;i<6;i++) {
          document.getElementById('tab'+i).classList.toggle('active', i===idx);
        }
      }
      document.getElementById('tab0').classList.add('active');
    </script>
  </body>
</html>
